'use client'

import { useState } from 'react'
import { 
  Box, 
  HStack, 
  Text, 
  IconButton, 
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  useColorModeValue,
  Tooltip
} from '@chakra-ui/react'
import { 
  FiFileText, 
  FiMoreVertical, 
  FiEdit2, 
  FiTrash2, 
  FiCopy 
} from 'react-icons/fi'
import { DraggableItem } from '../drag-drop/DraggableItem'
import { ChapterDragItem } from '@/types/drag-drop'
import { DragItem } from '@/types/drag-drop'

export interface Chapter {
  id: string;
  title: string;
  content: string;
  projectId: string;
  order: number;
}

interface ChapterListItemProps {
  chapter: Chapter;
  isActive?: boolean;
  onClick?: (chapter: Chapter) => void;
  onEdit?: (chapter: Chapter) => void;
  onDelete?: (chapter: Chapter) => void;
  onDuplicate?: (chapter: Chapter) => void;
  onDragStart?: (chapter: Chapter) => void;
  onDragEnd?: (chapter: Chapter, dropped: boolean) => void;
}

export const ChapterListItem = ({ 
  chapter,
  isActive = false,
  onClick,
  onEdit,
  onDelete,
  onDuplicate,
  onDragStart,
  onDragEnd
}: ChapterListItemProps) => {
  const [isHovered, setIsHovered] = useState(false)
  
  const bgColor = useColorModeValue('white', 'gray.800')
  const activeBgColor = useColorModeValue('blue.50', 'blue.900')
  const hoverBgColor = useColorModeValue('gray.50', 'gray.700')
  
  // 将章节转换为可拖拽项
  const dragItem: ChapterDragItem = {
    id: chapter.id,
    type: 'chapter',
    name: chapter.title,
    data: {
      title: chapter.title,
      content: chapter.content,
      projectId: chapter.projectId,
      order: chapter.order
    }
  }
  
  const handleDragStart = () => {
    if (onDragStart) {
      onDragStart(chapter)
    }
  }
  
  const handleDragEnd = (item: DragItem, dropped: boolean) => {
    if (onDragEnd) {
      onDragEnd(chapter, dropped)
    }
  }
  
  const handleClick = () => {
    if (onClick) {
      onClick(chapter)
    }
  }
  
  return (
    <DraggableItem 
      item={dragItem}
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
    >
      <Box
        p={2}
        borderRadius="md"
        bg={isActive ? activeBgColor : bgColor}
        _hover={{ bg: hoverBgColor }}
        cursor="pointer"
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        onClick={handleClick}
        data-testid={`chapter-item-${chapter.id}`}
      >
        <HStack justify="space-between">
          <HStack spacing={2}>
            <FiFileText />
            <Tooltip label={chapter.title} placement="top" openDelay={500}>
              <Text isTruncated maxW="180px">{chapter.title}</Text>
            </Tooltip>
          </HStack>
          
          {(isHovered || isActive) && (
            <Menu>
              <MenuButton
                as={IconButton}
                icon={<FiMoreVertical />}
                variant="ghost"
                size="sm"
                aria-label="More options"
                onClick={(e) => e.stopPropagation()}
              />
              <MenuList>
                {onEdit && (
                  <MenuItem 
                    icon={<FiEdit2 />} 
                    onClick={(e) => {
                      e.stopPropagation()
                      onEdit(chapter)
                    }}
                  >
                    编辑
                  </MenuItem>
                )}
                {onDuplicate && (
                  <MenuItem 
                    icon={<FiCopy />} 
                    onClick={(e) => {
                      e.stopPropagation()
                      onDuplicate(chapter)
                    }}
                  >
                    复制
                  </MenuItem>
                )}
                {onDelete && (
                  <MenuItem 
                    icon={<FiTrash2 />} 
                    color="red.500"
                    onClick={(e) => {
                      e.stopPropagation()
                      onDelete(chapter)
                    }}
                  >
                    删除
                  </MenuItem>
                )}
              </MenuList>
            </Menu>
          )}
        </HStack>
      </Box>
    </DraggableItem>
  )
}
